<template>
  <!-- 摄像头 -->
  <a-row class="ant-col ant-col-24 p-3 sxt quan1">
    <a-col :span="16" class="dis_ib sxt_l">
      <div class="new_eqname">
        <span>1号监控</span>
        <!-- <img class="new_eqname_quan" src="/quan.png" alt=""> -->
        <svg focusable="false" class="new_eqname_quan" @click="toggleFullscreen" data-icon="fullscreen" width="1em"
          height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path
            d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" />
        </svg>
      </div>
      <video id="new_equipment" autoplay muted ref="videoPlayer" src="" controls></video>
    </a-col>
    <a-col :span="8" class="dis_ib sxt_r">
      <div class="bag_f p-4">
        <div class="sxt_i">
          <div class="sxt_item" :class="selectedPanel === 'panel1' ? 'sxt_item_active' : ''"
            @click="selectedPanel = 'panel1'">设备列表</div>
          <div class="sxt_item" :class="selectedPanel === 'panel2' ? 'sxt_item_active' : ''"
            @click="selectedPanel = 'panel2'">设备控制</div>
        </div>
        <div v-if="selectedPanel === 'panel1'" class="eqgk">
          <div class="ant-form-item-control sousuo sousuo1" style="width: 100%">
            <a-input v-model="keyword" placeholder="搜索摄像头" type="text" id="" class="ant-input" @change="changeWord"
              @pressEnter="searchWord" />
            <div class="ss_icon" @click="searchWord">
              <img class="ss_icon_img" src="/icn_ss.png" alt="" />
            </div>
          </div>
          <div class="y_scroll1">
            <a-row class="equipment_list">
              <a-col :span="8" v-for="item in equipment_list" :key="item.id" @click="selectVideo(item)"
                :class="{ 'equipment_item_active': item.now }">
                <div class="equipment_nbk">
                  <img v-if="item.img" class="equipment_nbk_img" :src="item.img" />
                  <div class="equipment_name">{{ item.name }}</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
        <div v-if="selectedPanel === 'panel2'">
          <div class="control">
            <div class="direction"
              style="position: relative;background: linear-gradient(90deg,#06ba96 0%,#39d28b 50.69%,#66e782 100%);border: 6px solid #fff;box-shadow: 0 2px 4px #afe6ff;">
              <div class="centre"></div>
              <div v-for="(sector, index) in sectors" :key="sector" @click="setDirection(index)"
                :class="{ sector: true, 'sector-hover': sector.hover }" @mouseover="expandSector(index)"
                @mouseleave="shrinkSector(index)">
                <div class="sector_icon" style=""></div>
              </div>
            </div>
            <a-row :span="24" class="zoom">
              <a-col :span="5" class="zoom_item" @click="setVideo(8)">
                <img class="zoom_icon" src="/da.png" alt="" />
                <span>放大</span>
              </a-col>
              <a-col :span="5" class="zoom_item" @click="setVideo(9)">
                <img class="zoom_icon" src="/xiao.png" alt="" />
                <span>缩小</span>
              </a-col>
              <a-col :span="4" class="zoom_item" @click="setVideo(10)">
                <img class="zoom_icon" src="/jin.png" alt="" />
                <span>近焦</span>
              </a-col>
              <a-col :span="5" class="zoom_item" @click="setVideo(11)">
                <img class="zoom_icon" src="/yuan.png" alt="" />
                <span>远焦</span>
              </a-col>
              <a-col :span="5" class="zoom_item" @click="takeSnapshot()">
                <img class="zoom_icon" src="/yuan.png" alt="" />
                <span>拍照</span>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>
<script lang="ts">
import dayjs, { Dayjs } from 'dayjs';
import { MessageOutlined } from '@ant-design/icons-vue';
import { defineComponent, onMounted, ref, reactive, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { defHttp } from '@/utils/http/axios';
import Flv from 'flv.js';
import { getTenantId } from "@/utils/auth";
export default defineComponent({
  setup() {
    const videoPlayer = ref(null);
    // 切换了摄像头
    function selectVideo(video) {
      videoData(video.id);
    }
    function toggleFullscreen() {
      const player = videoPlayer.value;

      if (player) {
        if (playerz.requestFullscreen) {
          player.requestFullscreen();
        } else if (player.mozRequestFullScreen) {
          player.mozRequestFullScreen();
        } else if (player.webkitRequestFullscreen) {
          player.webkitRequestFullscreen();
        } else if (player.msRequestFullscreen) {
          player.msRequestFullscreen();
        }
      }
    }
    const sectors = reactive([{ hover: false }, { hover: false }, { hover: false }, { hover: false }]);
    const expandSector = (index) => {
      sectors[index].hover = true;
    };
    const shrinkSector = (index) => {
      sectors[index].hover = false;
    };
    const selectedPanel = ref('panel1');
    // 设备数据
    const equipment_list = ref([]);
    // 当前播放的设备信息
    let videoInfo = ref({});
    // 发起数据访问
    onMounted(() => {
      // 当页面加载完成后执行这里的代码
      let tenantId = getTenantId();
      if (!tenantId) {
        tenantId = "0"
      }
      defHttp.get({ url: '/video/list', params: { "tenantId": tenantId } }).then((res) => {
        console.log(res);
        equipment_list.value = res.records.map(item => {
          item.img = item.img || 'https://gd-hbimg.huaban.com/f1de634f524bf9e5b26bba025f78921f680f7d3edb897-hfnzyK';
          return item
        });
        // 默认使用第一个
        if (equipment_list.value.length > 0) {
          videoData(equipment_list.value[0].id);
        }
      });
    });
    let flvPlayer = ref<Flv.Player | null>(null);
    // 请求摄像头播放数据
    function videoData(id) {
      defHttp.get({ url: '/video/getVideoUrl', params: { id: id } }).then((res) => {
        console.log(res);
        videoInfo.value = res;
        if (Flv.isSupported() && videoPlayer.value) {
          var video = videoPlayer.value;
          // const hls = new Hls();
          // const src = videoInfo.value.flvAddress;

          // hls.loadSource(src);
          // hls.attachMedia(video);
          // hls.on(Hls.Events.MANIFEST_PARSED, function () {
          //   video?.play();
          // });

          if (flvPlayer.value) {
            flvPlayer.value.destroy();
            flvPlayer.value = null;
          }

          flvPlayer.value = Flv.createPlayer({
            type: 'flv',
            url: res.flvAddress // 替换为你的 FLV 流地址
          });
          flvPlayer.value.attachMediaElement(video);
          flvPlayer.value.load();
          flvPlayer.value.play();
        } else {
          console.error('Flv not supported in this browser!');
        }
      });
    }
    onBeforeUnmount(() => {
      if (flvPlayer.value) {
        flvPlayer.value.destroy();
        flvPlayer.value = null;
      }
    })
    function takeSnapshot() {
      // 获取video元素
      var video = videoPlayer.value;

      // 创建一个新的canvas元素
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');

      // 设置canvas尺寸与视频尺寸一致
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // 在canvas上绘制当前视频帧
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 获取当前时间戳
      var timestamp = new Date().getTime();

      // 将canvas内容转换为Blob
      canvas.toBlob(function (blob) {
        // 创建Blob URL
        var url = URL.createObjectURL(blob);

        // 创建一个虚拟的下载链接并触发点击
        var a = document.createElement('a');
        a.href = url;
        a.download = 'snapshot_' + timestamp + '.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();

        // 释放Blob URL和虚拟下载链接
        URL.revokeObjectURL(url);
        document.body.removeChild(a);
      }, 'image/png');
    }
    // 上下左右
    function setDirection(direction) {
      switch (direction) {
        case 0:
          // 0代表上
          setVideo(direction);
          break;
        case 1:
          // 页面上的1为右，实际应该入参为3
          setVideo(3);
          break;
        case 2:
          // 页面上的2，实际应该是下，入参为1
          setVideo(1);
          break;
        case 3:
          // 页面上的3为左，实际应该入参为2
          setVideo(2);
          break;
      }
      console.log(direction);
    }
    // 摄像头操作
    function setVideo(direction) {
      defHttp.post(
        { url: '/video/controlVideo', params: { id: videoInfo.value.id, direction: direction } },
        { joinParamsToUrl: true }
      );
    }
    return {
      selectedPanel,
      equipment_list,
      sectors,
      expandSector,
      shrinkSector,
      videoInfo,
      selectVideo,
      setDirection,
      toggleFullscreen,
      setVideo,
      videoPlayer,
      takeSnapshot
    };
  },
});
</script>
<style lang="less" scoped>
.quan1 {
  height: calc(100vh - 110px);
  overflow: hidden;
}

.y_scroll1 {
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 300px);
}

.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}

.control {
  width: 302px;
  position: relative;
  margin-top: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

  .circle {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ccc;
    background: linear-gradient(90deg, rgba(6, 186, 150, 1) 0%, rgba(57, 210, 139, 1) 50.69%, rgba(102, 231, 130, 1) 100%);
    border: 6px solid #fff;
    box-shadow: 0px 2px 4px rgba(175, 230, 255, 1);
  }

  .centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    z-index: 10;
  }

  .sector {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    border-radius: 100% 0 0 0;
    transition: transform 0.3s ease;
    transform-origin: 100% 100%;
    opacity: 0.5;
    cursor: pointer;
    transform: rotate(-45deg);
    transition: all 0.5s;

    &_icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(137deg);
      width: 0;
      height: 0;
      border-top: 10px solid #fff;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
    }
  }

  .sector:nth-child(2) {
    transform: rotate(45deg);
  }

  .sector:nth-child(3) {
    transform: rotate(135deg);
  }

  .sector:nth-child(4) {
    transform: rotate(225deg);
  }

  .sector-hover {
    // transform: scale(1.05);
    opacity: 1;
    background: rgba(255, 255, 255, 0.5);
  }

  .direction {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: auto;
  }

  .zoom {
    margin-top: 60px;
    width: 100%;
    height: 50px;
    background: rgba(78, 201, 146, 0.7);
    border-radius: 25px;
    overflow: hidden;
    transition: all 0.5s;

    .zoom_item {
      cursor: pointer;
      text-align: center;
      color: #fff;

      .zoom_icon {
        width: 20px;
        height: 20px;
        margin: auto;
        margin-top: 7px;
        display: block;
      }

      &:hover {
        background: rgba(78, 201, 146, 1);
      }
    }
  }
}

.eqgk {
  overflow: hidden;
  overflow-y: scroll;
}

.equipment_list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .equipment_nbk {
    height: 100%;
    background: rgba(51, 51, 51, 0.1);
    margin: 0px 6px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;

    &_img {
      width: 100%;
      height: 100%;
      background: #eaeaea;
    }
  }

  .equipment_item {
    height: 150px;
    margin-bottom: 10px;
    padding: 6px 0;
    border-radius: 12px;
    border: 1px solid rgba(78, 201, 146, 0);
    transition: all 0.5s;

    &:hover {
      border: 1px solid rgba(78, 201, 146, 1);
      box-sizing: border-box;
      transform: scale(0.95);
    }
  }

  .equipment_item_active {
    border: 1px solid rgba(78, 201, 146, 1);
    box-sizing: border-box;
    transform: scale(0.95);
  }

  .equipment_name {
    width: 100%;
    height: 30px;
    background: rgba(78, 201, 146, 1);
    line-height: 30px;
    padding: 0px 12px;
    position: absolute;
    bottom: 0;
    z-index: 11;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

.dis_ib {
  display: inline-block;
}

.sxt {
  display: flex;
  flex: 1 1;
  flex-direction: row !important;
}

.sxt_l {
  height: 100%;
  background: #fff;
  position: relative;
  flex: 1 1 0%;
  box-sizing: border-box;
  margin-right: 0.3rem;

  .new_eqname {
    position: absolute;
    background: rgba(78, 201, 146, 0.5);
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    color: #fff;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &_quan {
      width: 20px;
      height: 20px;
    }
  }

  #new_equipment {
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
  }

  #new_equipment::-webkit-media-controls-enclosure {
    display: none;
  }
}

.sxt_r {
  height: 100%;
  padding-left: 10px;
  width: 30rem;
  overflow: hidden;

  .sousuo1 {
    margin-top: 20px;
    height: 44px;

    .ant-input {
      height: 100%;
      border-radius: 12px;
    }
  }

  .sousuo {
    position: relative;

    .ss_icon {
      position: absolute;
      height: 70%;
      width: 50px;
      top: 50%;
      right: 0;
      bottom: 0;
      border-left: 1px solid #eee;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .ss_icon_img {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .sxt_i {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f0f2f5;
  }

  .sxt_item {
    padding: 10px 11px;
    // border-bottom: 4px solid #1DA76A;
    margin-right: 1.5rem;
    // font-size: 1rem;
    color: #333;
    cursor: pointer;
  }

  .sxt_item_active {
    border-bottom: 4px solid #1da76a;
    color: #1da76a;
  }

  .sxt_item:last-child {
    margin-right: 0px;
  }

  .bag_f {
    background: #fff;
    width: 100%;
    height: 100%;
  }
}

&::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1367px) {
  .equipment_item {
    height: 110px !important;
  }

  .equipment_name {
    font-size: 12px;
  }

  .control {
    margin-top: 20%;
  }

  .sousuo1 {
    height: 38px !important;
  }
}

html[data-theme='dark'] .bag_f {
  background: #151515 !important;
}

html[data-theme='dark'] .sxt_r .sxt_i {
  border-bottom: 1px solid #303030;
}
</style>
